<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>计划维护</title>
<link rel="stylesheet" href="../static/layui-2.3.0/css/layui.css">

<link href="../static/bootstrap-4.1.1/bootstrap.min.css"
	rel="stylesheet">

<style type="text/css">
#form-ma-query .layui-form-label {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}
</style>
</head>




<body>
	<div style="padding: 5px 0 20px 3px;">
		<span class="layui-breadcrumb" lay-separator="-"> <a href="#">计划管理</a>
			<a><cite>计划维护</cite></a>
		</span>
	</div>

	<form class="layui-form" id="form-man-query">
		<div class="layui-form-item">
			<div class="layui-inline">

				<table>
					<tr>
						<td><label class="layui-form-label" style="width: 120px;">计划状态</label></td>
						<td>
							<div class="layui-input-inline">
								<!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->
								<select name="plan_status" lay-verify="required"
									lay-filter="select-ma-query-man-status">
									<option value="">全部</option>
									<option value="0">未下达</option>
									<option value="1">下达</option>
								</select>
							</div>
						</td>

						<td><label class="layui-form-label" style="width: 120px;">客户名称</label></td>
						<td>
							<div class="layui-input-inline">
								<select name="cus_id" class="build-cus-id" lay-verify="required"
									lay-filter="select-ma-query-man-status">
									<option value="">全部</option>
								</select>
							</div>
						</td>
						<td><label class="layui-form-label" style="width: 120px;">规格名称</label></td>
						<td>
							<div class="layui-input-inline">
								<select name="standard_id" class="build-standard-id"
									lay-verify="required" lay-filter="select-ma-query-man-status">
									<option value="">全部</option>
								</select>
							</div>
						</td>
						<td><label class="layui-form-label" style="width: 120px;">花色名称</label></td>
						<td>
							<div class="layui-input-inline">
								<select name="co_id" class="build-co-id" lay-verify="required"
									pattern="yyyy-MM-dd" lay-filter="select-ma-query-man-status">
									<option value="">全部</option>
								</select>
							</div>
						</td>
						<td><label class="layui-form-label" style="width: 120px;">计划优先级</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="text" name="plan_xh" autocomplete="off"
									class="layui-input">
							</div>
						</td>





					</tr>

					<tr>
						<td><label class="layui-form-label" style="width: 120px;">产品类型</label></td>
						<td>
							<div class="layui-input-inline">
								<select name="plan_type" lay-verify="required"
									lay-filter="select-ma-query-man-status">
									<option value="">类型</option>
									<option value="1">白布产品</option>
									<option value="2">染色产品</option>
									<option value="3">无底色印花产品</option>
									<option value="4">有底色印花产品</option>
								</select>
						</td>
						<td><label class="layui-form-label" style="width: 120px;">下达日期</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="date" name="plan_date" autocomplete="off"
									class="layui-input" pattern="yyyy-MM-dd">
							</div>
						</td>
						<td><label class="layui-form-label" style="width: 120px;">计划数量</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="text" name="plan_num" autocomplete="off"
									class="layui-input">
							</div>
						</td>

						<!-- <td><label class="layui-form-label" style="width: 120px;">计划状态</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="text" name="plan_status" autocomplete="off"
									class="layui-input">
							</div>
						</td> -->
						<td><label class="layui-form-label" style="width: 120px;">计划编号</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="number" name="plan_id" autocomplete="off"
									class="layui-input">
							</div>
						</td>

						<td><label class="layui-form-label" style="width: 120px;">计划月份</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" name="plan_month"
									id="test3" placeholder="yyyy-MM">
								<!-- <input type="text" name="plan_month" autocomplete="off"
									class="layui-input"> -->
							</div>
						</td>


					</tr>

					<tr>

						<td><label class="layui-form-label" style="width: 120px;">计划下达人</label></td>
						<td>
							<div class="layui-input-inline">
								<input type="text" name="plan_person" autocomplete="off"
									class="layui-input">
							</div>
						</td>

						<td colspan="8">
							<div class="layui-input-inline">
								<button class="layui-btn" id="bn-man-query">
									<i class="layui-icon layui-icon-search"></i> 查询
								</button>
							</div>
						</td>
					</tr>
				</table>

			</div>


		</div>

	</form>


	<div class="layui-btn-container">
		<button type="button" class="layui-btn" id="bn-man-add-multi">
			<i class="layui-icon">&#xe608;</i> 新增
		</button>
		<button type="button" class="layui-btn" id="bn-man-xd-multi">
			<i class="layui-icon layui-icon-ok-circle"></i> 下达
		</button>
		<button class="layui-btn layui-btn-danger" id="bn-man-del-multi">
			<i class="layui-icon layui-icon-delete"></i> 删除
		</button>
	</div>




	<script type="text/html" id="barDemo">
    <!--  laytpl 语法， d指数据，在这里指当前行数据 -->
    {{#  if(d.plan_status == '0' ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="man_edit"><i class="layui-icon">&#xe608;</i> 编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="man_xd"><i class="layui-icon layui-icon-ok-circle"></i> 下达</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="man_del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
	{{# }else if(d.plan_status == '1'){ }}

	{{# }}}
</script>

	<table id="plan-manager-table" lay-filter="mantable"></table>

	<script src="../static/js/jquery-3.3.1.min.js"></script>
	<script src="../static/bootstrap-4.1.1/bootstrap.min.js"></script>
	<script src="../static/layui-2.3.0/layui.js"></script>
	<script src="../static/js/sweetalert-2.1.0.min.js"></script>
	<script src="../static/js/common.js"></script>

	<script type="text/javascript">
		
	
	
		layui.use([ 'element', 'table', 'layer', 'form', 'laydate' ], function() {
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;
			
			var date = new Date()
			var yy= date.getFullYear();
			var MM =date.getMonth();
			
			if(MM>10){
				yy++;
				MM=1;
			}else{
				MM=MM+2;
			}
			var min = yy+"-"+MM;
			var dataxd = new Date(min);
			//年月选择器
			laydate.render({
				elem : '#test3',
				type : 'month',
				min:min+"-01",
				value:dataxd
				
			});
	
	
	
	
			//第一个实例
			var manTable = table.render({
				elem : '#plan-manager-table',
				url : 'manager', //数据接口
				page : true, //开启分页
				limits : [ 5, 10, 20, 30 ],
				limit : 5,
				cols : [ [ //表头
					{
						type : 'checkbox'
					}
					,
					{
						field : 'plan_id',
						title : '编号',
						sort : true,
						width : 120
	
					// event : 'setSign',
					// style : 'cursor: pointer;'
					}
					, {
						field : 'plan_xh',
						title : '计划优先级',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'plan_month',
						title : '计划月份',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'plan_num',
						title : '计划数量',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'plan_type',
						title : '产品类型',
						templet : function(d) {
							if (d.plan_type == '1') {
								return '白布产品';
							}
							if (d.plan_type == '2') {
								return '染色产品';
							}
							if (d.plan_type == '3') {
								return '无底色印花产品';
							}
							if (d.plan_type == '4') {
								return '有底色印花产品';
							}
	
						},
						width : 120
					// edit : 'text'
					}
					//<!-- 1-白布产品 2-染色产品 3-无底色印花产品 4-有底色印花产品 -->
					, {
						field : 'plan_date',
						title : '计划下达日期',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'plan_person',
						title : '计划下达人',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'plan_status',
						title : '计划状态',
	
						//edit : 'text',
						//00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除
						templet : function(d) {
							if (d.plan_status == '0') {
								return '未下达';
							}
							if (d.plan_status == '1') {
								return '下达';
							}
	
						},
						width : 120
					}
					, {
						field : 'co_name',
						title : '花色',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'cus_name',
						title : '客户',
						width : 120
					// edit : 'text'
					}
					, {
						field : 'standard_name',
						title : '规格',
						width : 120
					// edit : 'text'
					}
					, {
						fixed : 'right',
						title : '操作',
						toolbar : '#barDemo'
					}
	
				] ]
			});
	
	
			//批量删除
			$("#bn-man-del-multi").click(function() {
				var checkStatus = table.checkStatus('plan-manager-table'); //test即为基础参数id对应的值
				console.log(checkStatus.data); //获取选中行的数据
				//console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
				//console.log(checkStatus.isAll ) //表格是否全选
				var arr = [];
				$.each(checkStatus.data, function() {
					arr.push(this.plan_id);
				});
	
	
				//优化1.1
				opr.ajaxWithConfirm({
					url : 'manager',
					data : JSON.stringify(arr),
					contentType : "application/json;charset=UTF-8",
					method : 'delete',
					dataType : 'json',
					title : "您确实要删除选择的数据吗?",
					text : "数据一旦删除将无法恢复!",
					layer : layer,
					layuiTableIns : manTable,
				});
			});
	
	
			//批量修改状态
			$("#bn-man-xd-multi").click(function() { //确定
				changeMultiCusStatus('您确实要下达选择的计划信息吗？', '计划信息一旦被下达，将不能再被编辑！', '1', "plan-manager-table", manTable);
			});
	
			//批量修改封装方法
			function changeMultiCusStatus(title, text, status, tableID, Table) {
				var checkStatus = table.checkStatus(tableID); //基础参数id对应的值
				console.log(checkStatus.data) //获取选中行的数据(数组)
				//console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
				//console.log(checkStatus.isAll ) //表格是否全选
				if (checkStatus.data.length == 0) {
					swal({
						text : '您没有选择任何数据！',
						icon : "error",
						buttons : false,
						timer : 1500
					});
					return;
				}
				var arr = [];
				$.each(checkStatus.data, function() {
					arr.push(this.plan_id);
				});
	
				//优化1.1
				opr.ajaxWithConfirm({
					title : title,
					text : text,
					url : 'manager/status/' + status,
					data : JSON.stringify(arr),
					contentType : "application/json;charset=UTF-8",
					method : 'put',
					layer : layer,
					layuiTableIns : manTable
				});
	
			}
	
	
			//监听工具条
			table.on('tool(mantable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
	
				if (layEvent === 'man_xd') { //下达
					opr.ajaxWithConfirm({
						title : "您确实要下达该条数据吗?",
						url : 'manager/status/' + data.plan_id + "/1",
						method : 'put',
						layer : layer,
						layuiTableIns : manTable
					});
	
				} else if (layEvent === 'man_edit') { //修改
	
					$("#bn-doadd-manager").hide();
					$("#bn-doupdate-manager").show();
	
	
					//优化1.1
					opr.ajax({
						url : 'manager/' + data.plan_id,
						method : 'get',
						layer : layer,
						responseOkHandler : function(cus) {
							//form-cus-upd是表单的lay-filter值
							form.val("form-manager", cus);
	
							layerIdx = layer.open({
								type : 1,
								title : '修改计划信息',
								area : [ '600px', '700px' ],
								content : $('#div-manager'),
								zIndex : 100 //将层次降低，以使sweetalert能够在layer之上
							});
	
						}
					});
	
	
					//修改
					form.on('submit(bn-doupdate-manager)', function(data) {
	
						//优化1.1
						opr.ajax({
							url : 'manager',
							// data: data.field,
							data : JSON.stringify(data.field), //处理为json格式
							contentType : 'application/json;charset=UTF-8',
							method : 'put',
							dataType : 'json',
							layer : layer,
							layuiTableIns : manTable,
							responseOkHandler : function(result) { //关闭当前的模态框（修改必须要加添加）
								layer.close(layerIdx);
								return true; //返回true,继续默认后续行为
							}
						});
						return false;
					});
	
				} else if (layEvent === 'man_del') { //删除
					//优化1.1
					opr.ajaxWithConfirm({
						title : "您确实要删除该条数据吗?",
						text : "数据一旦删除将无法恢复!",
						url : 'manager/' + data.plan_id,
						method : 'delete',
						layer : layer,
						layuiTableIns : manTable
					});
				}
	
			});
	
	
			//监听下拉选择框被选中时触发<select lay-filter="select-cus-query-cus-status"></select>
			form.on('select(select-ma-query-man-status)', function(data) {
				$("#bn-man-query").click();
			});
	
			//显示按钮是否可用
			function showBns() {
				var plan_status = $("#form-man-query select[name=plan_status]").val();
	
				if (plan_status == '') {
					//add(添加)--xd(下达)--del(删除)
					<!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 --> //////prop("disabled",true).addClass("layui-btn-disabled")先设置不可点击(true)+禁用样式
					$("#bn-man-add-multi,#bn-man-xd-multi,#bn-man-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
				} else if (plan_status == '0') {
					$("#bn-man-add-multi,#bn-man-xd-multi,#bn-man-del-multi").prop("disabled", false).removeClass("layui-btn-disabled");
				} else if (plan_status == '1') {
					$("#bn-man-add-multi,#bn-man-xd-multi,#bn-man-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
				}
			}
	
			showBns();
	
	
			//条件查询
			$("#bn-man-query").click(function() {
				//将表单对象封装成json对象
				var arr = $("#form-man-query").serializeArray();
				var params = {};
	
				for (var i = 0; i < arr.length; i++) {
					params[arr[i].name] = arr[i].value;
				}
				//这里以搜索为例
				manTable.reload({
					where : params,
					page : {
						curr : 1 //重新从第 1 页开始
					}
				});
				//重设按钮
				showBns();
				return false;
			});
	
	
			//添加弹框
			var layerIdx;
			$("#bn-man-add-multi").click(function() {
				//formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
				$("#bn-doadd-manager").show();
				$("#bn-doupdate-manager").hide();
				form.val("form-manager", {
	
				});
				layerIdx = layer.open({
					type : 1,
					title : '新增计划信息',
					area : [ '600px', '700px' ],
					content : $('#div-manager') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
			});
	
			form.on('submit(bn-doadd-manager)', function(data) {
				//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	
				//优化1.1
				opr.ajax({
					url : "manager",
					data : data.field,
					method : "post",
					dataType : 'json',
					layer : layer,
					layuiTableIns : manTable,
					responseOkHandler : function(result) {
						layer.close(layerIdx);
						return true; //返回true,继续默认后续行为
					}
				});
				return false;
			});
	
	
	
	
	
		});
	</script>
	<!--弹出窗口内容  -->
	<div style="padding:20px; width:320px; display:none" id="div-manager">
		<form class="layui-form" lay-filter="form-manager">
			<div class="layui-form-item" id="plan_id" style="display: none">
				<label class="layui-form-label">计划编号</label>
				<div class="layui-input-block">
					<input type="hidden" name="plan_id" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">优先级</label>
				<div class="layui-input-block">
					<input type="number" name="plan_xh" required lay-verify="required"
						placeholder="请输入生产优先级" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">计划月份</label>
				<div class="layui-input-block">
					<input type="text" name="plan_month" required lay-verify="required"
						placeholder="请输入计划月份yyyy-MM" autocomplete="off"
						class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">计划数量</label>
				<div class="layui-input-block">
					<input type="number" name="plan_num" required lay-verify="required"
						placeholder="请输入计划数量" autocomplete="off" class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">产品类型</label>
				<div class="layui-input-block">
					<select name="plan_type" lay-verify="required">
						<option value="">类型</option>
						<option value="1">白布产品</option>
						<option value="2">染色产品</option>
						<option value="3">无底色印花产品</option>
						<option value="4">有底色印花产品</option>
					</select>
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">下达日期</label>
				<div class="layui-input-block">
					<input type="date" name="plan_date" required lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">下达人</label>
				<div class="layui-input-block">
					<input type="text" name="plan_person" required
						lay-verify="required" placeholder="请输入计划下达人" autocomplete="off"
						class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>



			<div class="layui-form-item">
				<label class="layui-form-label">客户</label>
				<div class="layui-input-block">
					<select name="cus_id" class="build-cus-id" lay-verify="required">
						<option value="">客户</option>
					</select>
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">规格</label>
				<div class="layui-input-block">
					<select name="standard_id" class="build-standard-id"
						lay-verify="required">
						<option value="">客户</option>
					</select>
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
			</div>



			<div class="layui-form-item">
				<label class="layui-form-label">花色</label>
				<div class="layui-input-block">
					<!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->
					<select name="co_id" class="build-co-id" lay-verify="required">
						<option value="">花色</option>
					</select>
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">花色状态</div> -->
			</div>




			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="bn-doadd-manager" lay-submit
						lay-filter="bn-doadd-manager">提交</button>
					<button class="layui-btn" id="bn-doupdate-manager" lay-submit
						lay-filter="bn-doupdate-manager">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
	
		//1.页面加载完成执行js，ajax请求
		$(function() {
			$.ajax({
				url : "customer",
				type : "get",
				success : function(result) {
					if (result.success) {
						//2.解析顾客信息
						build_customer(result.data);
					}
				}
			});
		});
		function build_customer(result) {
			$.each(result, function(index, item) {
				// alert(item.dormName)
				$(".build-cus-id").append($("<option></option>").val(item.cus_id).text(item.cus_name));
			});
		}
	
		//1.页面加载完成执行js，ajax请求
		$(function() {
			$.ajax({
				url : "standard",
				type : "get",
				success : function(result) {
					if (result.success) {
						//2.解析规格信息
						build_standard(result.data);
					}
				}
			});
		});
		function build_standard(result) {
			$.each(result, function(index, item) {
				// alert(item.dormName)
				$(".build-standard-id").append($("<option></option>").val(item.standard_id).text(item.standard_name));
			});
		}
	
	
	
		//1.页面加载完成执行js，ajax请求
		$(function() {
			$.ajax({
				url : "color",
				type : "get",
				success : function(result) {
					if (result.success) {
						//2.解析花色信息
						build_color(result.data);
					}
				}
			});
		});
		function build_color(result) {
			$.each(result, function(index, item) {
				// alert(item.dormName)
				$(".build-co-id").append($("<option></option>").val(item.co_id).text(item.co_name));
			});
		}
	</script>
</body>
</html>
